<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制后台</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/pear/css/pear-notable.css" />
		<link rel="stylesheet" href="../../admin/css/other/console1.css" />

		<style>
			.dtree-scroll{
				/* height: calc(100vh - 5px)!important; */
				/* height: 100vh!important; */
				height: 200px!important;
				text-align: left;
				overflow: auto;
			}
			.select-date-wrapper{
				height: 100%!important;
			}
			.layui-table-body .layui-none{
				padding: 10px 15px;
			} 
      .layui-table-cell{
        text-align: left!important;
      }
		</style>
    <style id="tableCSS">

    </style>

	</head>
	<body class="pear-container">
		<div>
			<!-- 选项 -->
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs12">
					<div class="layui-collapse">
						<div class="layui-colla-item">
							<h2 class="layui-colla-title" id="selectCardHeader">选项</h2>

							<div class="layui-colla-content layui-show">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-xs6">
										<div class="layui-card top-panel" >
											<div class="layui-card-body select-date-wrapper">
												<label class="layui-form-label" style="text-align: center;">选择日期</label>
												<div class="layui-input-block">
													<input id="selectDate" class="layui-input" type="text" autocomplete="off" placeholder="选择日期范围">
												</div>

											</div>
										</div>
									</div>

                  <div class="layui-col-xs6">
										<div class="layui-card top-panel" >
											<div class="layui-card-body select-date-wrapper">
												<label class="layui-form-label" style="text-align: center;">工程</label>
												<div class="layui-input-block" style="display: flex;align-items: center;">
													<input id="selectSecDept" class="layui-input" type="text" autocomplete="off" placeholder="选择工程" lay-on="test-offset-l">
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

			<!-- 数据表 -->
			<div class="layui-row layui-col-space10">	
				<div class="layui-col-md6">
					<div class="layui-card top-panel">
						<div class="layui-card-body" style="height: 100%!important;">
              EMD产量(kpcs)
              <table id="emd2m-table" lay-filter="emd2m-table"></table>
						</div>
					</div>
				</div>
        <div class="layui-col-md6">
					<div class="layui-card top-panel">
						<div class="layui-card-body" style="height: 100%!important;">
              UMD产量(kpcs)
              <table id="umd2m-table" lay-filter="umd2m-table"></table>
						</div>
					</div>
				</div>
			</div>

      <!-- 右侧弹窗 -->
			<div id="leftPopup" style="display: none;">
				<ul id="demoTree" class="dtree" data-id="0"></ul>
			</div>

		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../lay-ext/dayjs.min.js"></script>
		
		<script>
			// 加载自定义模块,检查浏览器和token
			layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
			layui.use(['layer', 'echarts', 'element', 'count','dtree','myheader','popup','laydate','table','util'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					count = layui.count,
					echarts = layui.echarts,
					dtree=layui.dtree,
					myheader=layui.myheader,
					popup=layui.popup, 
					laydate=layui.laydate,
					table=layui.table,
					util = layui.util,
					laytpl=layui.laytpl;

				// 定义全局 ajax的请求头
				myheader.ajaxGlobal(myheader.checkToken().tokenValue);
				// 定义常量
				const baseUrl = myheader.baseUrl();

				// 定义默认值
				// 默认日期为今天
				var selectedDate= dayjs().format("YYYY-MM-DD")
        let selectedSecDeptID = 0
        let emdTableIdx=0
        let umdTableIdx=0

				// 渲染并获树的实例
				const demoTree = dtree.render({
					elem: "#demoTree",
					initLevel: "1",
					width:"100%",
					scroll:"#dtree-scroll-wrapper",
					method: 'get',
					url: baseUrl+"/machineOgztionDTree/findAllSecDept?_t="+new Date().getTime(),
				})
        
        //dtree事件 node(节点)
				dtree.on("node('demoTree')",function(obj){
					if(!obj.param.leaf){
						demoTree.clickSpread(obj.dom);  //调用内置函数展开节点
					} else {
						selectedSecDeptID=obj.param.nodeId
						$('#selectSecDept').val(obj.param.context)
            layer.close(layerRightIdx)
						renderResult(selectedSecDeptID,selectedDate)
					}
				})

        let layerRightIdx=0
				// 选设备的左侧弹窗
				util.on('lay-on',{
					'test-offset-l':function(){
						layerRightIdx=layer.open({
							type: 1,
							offset: 'r',
							anim: 'slideRight', // 从左往右
							area: ['320px', '100%'],
							shade: 0.1,
							shadeClose: true,
							id: 'ID-demo-layer-direction-l',
							content: $('#leftPopup')
						});
					}
				})


				// 日期选择
				laydate.render({
					elem: '#selectDate' //指定元素
					,value: selectedDate
					,done:function(value){
						selectedDate=value
            if(selectedSecDeptID=="") {
							layer.msg('请选择工程')
							return 
						}
						renderResult(selectedSecDeptID,selectedDate)
					}
				});
        
        //前工程列设定
        let cols01 = [
          [
            {title:'设备号',field:'machineNo',width:100,totalRow:'合计'},
            {title:'计划',field:'planOutput',width:80,totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'普通品',field:'actualCommonOutput',width:80,      totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'HR品',field:'actualHROutput',width:80,totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
          ]
        ]
        //后工程 HOT/TP 列设定
        let cols02 = [
          [
            {title:'设备号',field:'machineNo',totalRow:'合计'},
            {title:'计划',field:'planOutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'普通品',field:'actualCommonOutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'HR品',field:'actualHROutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'再编集',field:'bj2Output',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'端数',field:'dsOutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'废弃枚',field:'defect',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
          ]
        ]
        // 后工程普通列设定
        let cols03 = [
          [
            {title:'设备号',field:'machineNo',totalRow:'合计'},
            {title:'计划',field:'planOutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'普通品',field:'actualCommonOutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'HR品',field:'actualHROutput',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
            {title:'废弃枚',field:'defect',totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'},
          ]
        ]
        
        
        let emdTableConifg={
          elem: "#emd2m-table",
            // 请求
            url: baseUrl + "/shiftcaparecord/getEMD2MCapa4Home",
            response: {
              // 重新设定返回的数据格式
              statusCode: 200, //默认返回 code:0 为返回成功,改成200
              countName: "total", //默认数组总量字段是count,改成total
            },
            // 样式
            skin: "line",
            lineStyle:"height:auto",
            align:'center',
            //分页
            page: false, // 分页
            totalRow:true,

            // 工具
            // 头部右侧工具栏
            defaultToolbar: [
              {
                title: "刷新",
                layEvent: "refresh",
                icon: "layui-icon-refresh",
              },
            ],
            // 渲染完以后的回调
            done:function(){
              $(".layui-table").css("width", "100%");
              $("th[data-field='bar']").css("border-right", "none");
              
              // // layer.tips('双击可编辑','.laytable-cell-1-0-2',{tips:1})
              
              // // 解决固定列高度的bug
              // $(".layui-table-main tr").each(function (index, val) {
              //   $(".layui-table-fixed").each(function () {
              //     $($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
              //   });
              // });
              // $(".layui-table-header tr").each(function (index, val) {
              //   $(".layui-table-fixed").each(function () {
              //     $($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
              //   });
              // });

            }
        }
        let umdTableConifg={
          elem: "#umd2m-table",
            // 请求
            url: baseUrl + "/shiftcaparecord/getUMD2MCapa4Home",
            response: {
              // 重新设定返回的数据格式
              statusCode: 200, //默认返回 code:0 为返回成功,改成200
              countName: "total", //默认数组总量字段是count,改成total
            },
            // 样式
            skin: "line",
            lineStyle:"height:auto",
            //分页
            page: false, // 分页
            totalRow:true,
            // 工具
            // 头部右侧工具栏
            defaultToolbar: [
              {
                title: "刷新",
                layEvent: "refresh",
                icon: "layui-icon-refresh",
              },
            ],
            // 渲染完以后的回调
            done:function(){
              $(".layui-table").css("width", "100%");
              $("th[data-field='bar']").css("border-right", "none");
              
              // // layer.tips('双击可编辑','.laytable-cell-1-0-2',{tips:1})
              
              // // 解决固定列高度的bug
              // $(".layui-table-main tr").each(function (index, val) {
              //   $(".layui-table-fixed").each(function () {
              //     $($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
              //   });
              // });
              // $(".layui-table-header tr").each(function (index, val) {
              //   $(".layui-table-fixed").each(function () {
              //     $($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
              //   });
              // });

            }
        }

        let secDeptInfo=null;

        function renderResult(selectedSecDeptID,selectedDate){
          console.log(selectedSecDeptID,selectedDate);
          $.ajax(baseUrl+'/secDept/getSecDeptByDeptID',{
            type:'get',
            async: false ,
            data: {
              secDeptID:selectedSecDeptID
            },
            success:function(res){
              secDeptInfo = res.data
            }
          })
          if(secDeptInfo==null) return 
          if(secDeptInfo.location4SecD==1){
            // 前工程
            emdTableConifg.cols=cols01
            umdTableConifg.cols=cols01

          }else{
            if(secDeptInfo.twiceOutput){
              // 后工程,hot/tp
              emdTableConifg.cols=cols02
              umdTableConifg.cols=cols02
            }else {
              // 后工程其他
              emdTableConifg.cols=cols03
              umdTableConifg.cols=cols03
            }
          }
          emdTableConifg.where= {
            secDeptId:selectedSecDeptID,
            selectedDate:selectedDate
          }
          umdTableConifg.where= {
            secDeptId:selectedSecDeptID,
            selectedDate:selectedDate
          }

          if(emdTableIdx<1){
            emdTableIdx=table.render(emdTableConifg)
          }else {
            emdTableIdx.reload(emdTableConifg)
          }
          if(umdTableIdx<1){
            umdTableIdx=table.render(umdTableConifg)
          } else {
            umdTableIdx.reload(umdTableConifg)
          }

        }


		});
		</script>

	</body>
</html>
